import { VNode, createVNode, render, defineComponent, h } from "vue";
import { PyButton } from "../PyButton";
import { ButtonType } from "../..";

const class_name = "_div__cascader__dropdown__btn";

export const createBtns = (confirm: () => void, close: () => void) => {
	const btns: Array<ButtonType> = [
		{
			text: "确认",
			type: "primary",
			click: () => confirm(),
		},
		{
			text: "取消",
			type: "danger",
			click: () => close(),
		},
	];

	const target = createBtnComponents(btns);
	const _target = createVNode(target);

	const prevDom = document.querySelector(
		".el-cascader__dropdown ." + class_name
	) as HTMLDivElement;

	if (prevDom) {
		prevDom.remove();
	}

	return appendTarget(_target);
};

const appendTarget = (target: VNode) => {
	const _target = document.querySelector(
		".el-cascader__dropdown .el-cascader-panel"
	) as HTMLDivElement;
	if (!_target) return;
	const div = document.createElement("div");
	div.className = class_name;
	div.style.cssText = `
        padding: 10px 0px;
        box-sizing: border-box;
        text-align: center;
        border-top: 1px solid #e4e7ed;
    `;

	_target.insertAdjacentElement("afterend", div);
	render(target, div);
};

const createBtnComponents = (btns: Array<ButtonType>) => {
	return defineComponent({
		render() {
			return btns.map(btn => {
				return h(PyButton, { configure: btn });
			});
		},
	});
};
